<template>
  <div class="work-place">
    <div class="left-wrap">
      <div style="margin-bottom: 15px">
        <ep-work-title title="工作台"></ep-work-title>
      </div>
      <ul class="count">
        <li>
          <div class="item">
            <img src="@/assets/img/workplace/task-total.png" alt="" />
            <div class="item-content">
              <span class="item-content-title">总数</span>
              <p class="item-content-count">{{ this.allInfo.checkTotal || 0 }}<span>条</span></p>
            </div>
          </div>
        </li>
        <li>
          <div class="item">
            <img src="@/assets/img/workplace/task-complete.png" alt="" />
            <div class="item-content">
              <div class="item-content-title">已完成数</div>
              <div class="item-content-count">{{ this.allInfo.checkedTotal || 0 }}<span>条</span></div>
            </div>
          </div>
          <div class="progress">
            <span>当前完成进度</span>
            <ep-work-progress
              style="margin-left: 5px"
              width="8vw"
              :percent="this.allInfo.completionRate || 0"
            />
          </div>
        </li>
        <li>
          <div class="item">
            <img src="@/assets/img/workplace/task-uncomplete.png" alt="" />
            <div class="item-content">
              <div class="item-content-title">待完成</div>
              <div class="item-content-count">{{ this.allInfo.unCheckTotal || 0 }}<span>条</span></div>
            </div>
          </div>
        </li>
      </ul>
      <div class="task">
        <div class="title">任务列表</div>
        <div class="condition">
          <div class="desc">
            <img src="@/assets/img/workplace/task-ylq.png" alt="" />
            <label>已临期</label>
            <p>{{ this.allInfo.overdueTotal || 0 }}</p>
            <span>条</span>
          </div>
          <div class="con-search">
            <a-row :gutter="15">
              <a-col :span="6">
                <label>完成状态：</label>
                <a-select
                    style="width: 7vw;"
                    v-model="form.c0103"
                    @change="handleStatusClick"
                    dropdownClassName="ry-select"
                >
                  <a-select-option
                      v-for="(item, index) in dictData.c0103"
                      :value="item.key"
                      :key="index"
                  >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-col>
              <a-col :span="6">
                <label>类别：</label>
                <a-select
                    style="width: 8vw;"
                    v-model="form.type"
                    @change="handleTaskClick"
                    dropdownClassName="ry-select"
                >
                  <a-select-option
                      v-for="(item, index) in dictData.type"
                      :value="item.key"
                      :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                <label>排序：</label>
                <a-select
                    style="width: 8vw;"
                    v-model="form.sort"
                    @change="handleOrderClick"
                    dropdownClassName="ry-select"
                >
                  <a-select-option
                      v-for="(item, index) in dictData.sort"
                      :value="item.key"
                      :key="index"
                  >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-col>
              <a-col :span="6">
                <ep-work-search
                    style="width: 12vw"
                    v-model="form.keyWords"
                    size="small"
                    placeholder="请输入任务名称"
                    enter-button="搜索"
                    @search="onSearchTask"
                ></ep-work-search>
              </a-col>
            </a-row>
          </div>
        </div>
        <template v-if="taskList.length">
          <ul class="task-list">
            <li v-for="(item, index) in taskList" :key="index">
              <p :class="'status-' + item.status">
                {{ item.status | taskStatus }}
              </p>
              <div v-if="item.c0103 == '1'" class="text">
                {{ item.c0302 + "排查任务已完成" }}
              </div>
              <div v-else class="text">{{ item.c0302 + "排查任务待完成" }}</div>
              <div class="num">
                数量：<span>{{ item.total || 0 }}</span
                >条
              </div>
              <div class="timer">截止时间：{{ item.c0305 || "-" }}</div>
              <div class="btn">
                <ep-button
                  v-if="item.c0103 == '0'"
                  size="small"
                  type="work-place"
                  @click="toTask(item)"
                  :disabled="new Date()>new Date(Date.parse(item.c0305))"
                  >去完成</ep-button
                >
              </div>
            </li>
          </ul>
          <vxe-pager
            v-if="pagination.total > 5"
            :current-page.sync="pagination.current"
            :page-size.sync="pagination.pageSize"
            :total="pagination.total"
            :layouts="['PrevPage', 'Number', 'NextPage', 'FullJump', 'Total']"
            @page-change="showSizeChange"
          >
          </vxe-pager>
        </template>
        <div v-else style="position:relative; height: calc(100% - 135px)">
          <a-empty class="table-empty"/>
        </div>
      </div>
    </div>
    <div class="right-wrap" v-if="newsFlag">
      <div class="title">
        <p>最新消息</p>
        <span @click="newsFlag = false">收起消息</span>
      </div>
      <div style="margin-top: 25px">
         <ep-work-search
          v-model="newsKeyWords"
          size="small"
          placeholder="请输入消息内容"
          enter-button="搜索"
          @search="onSearchMsg"
        ></ep-work-search>
      </div>
      <div class="perusal">
        <div @click="queryMessage(null, { status: 'read' })">
          <img src="@/assets/img/workplace/news-yd.png" alt="" />
          <p>
            已读<span>{{ readMsgTotal || 0 }}</span
            >条
          </p>
        </div>
        <div @click="queryMessage(null, { status: 'send' })">
          <img src="@/assets/img/workplace/news-wd.png" alt="" />
          <p>
            未读<span style="color: #d94a49">{{ noReadMessageCnt || 0 }}</span
            >条
          </p>
        </div>
        <ep-button v-if="noReadMessageCnt > 0" @click="readAllMessage">一键已读</ep-button>
      </div>
      <template v-if="messageList.length">
        <ul class="message-list">
          <li
            v-for="(item, index) in messageList"
            :key="index"
            @click="readMessage(item)"
          >
            <span :class="'status-' + item.status"></span>
            <div>{{ item.title }}</div>
            <p>{{ item.description }}</p>
          </li>
        </ul>
        <vxe-pager
          v-if="pagination1.total > 5"
          :current-page.sync="pagination1.current"
          :page-size.sync="pagination1.pageSize"
          :total="pagination1.total"
          :layouts="['PrevPage', 'Number', 'NextPage', 'FullJump', 'Total']"
          @page-change="showSizeChange1"
        >
        </vxe-pager>
      </template>
      <div v-else style="height: 300px; margin-top: 120px">
        <a-empty />
      </div>
    </div>
    <div class="spread-news" v-else @click="(newsFlag = true)">展开消息</div>
    <a-modal
      :title="taskDetails.title"
      v-model="taskVisible"
      centered
      style="top: 20px"
      width="85%"
      destroyOnClose
    >
      <div>
        {{ taskDetails.description }}
      </div>
    </a-modal>
    <a-modal
      :title="newDetails.title"
      :visible="showNewDetailsFlag"
      :confirm-loading="false"
      @ok="closeNewDetails"
      @cancel="closeNewDetails"
      oncancel="false"
      :footer="null"
    >
      <div style="text-indent: 2em; padding: 0px 40px 0 40px">
        {{ newDetails.messageContent }}
      </div>
      <div style="text-align: right; padding: 40px">
        <div>{{ newDetails.sendName }}</div>
        <div>{{ newDetails.sendTime }}</div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import api from "@/services/system/api";
import {
  getWorkPlaceListData,
  getTaskDetails,
  getWorkPlaceTotalData,
  getMessageList,
  getNoReadCnt,
} from "@/services/system/whdngxlApi";
import { isEmptyStr } from "@/utils/util";
export default {
  name: "IndexDemo",
  components: {},
  data() {
    return {
      taskVisible: false,
      taskDetails: {
        title: "",
        description: "",
      },
      allInfo: {
        checkTotal: 0, //排查总数
        checkedTotal: 0, //已排查数
        unCheckTotal: 0, //未排查数
        completionRate: 0, //完成率
        overdueTotal: 0, //临期数
      },
      messageList: [],
      keywords: "",
      taskList: [],
      pagination: {
        pageSize: 5,
        current: 1,
        total: 0,
      },
      pagination1: {
        pageSize: 5,
        current: 1,
        total: 0,
      },
      noReadMessageCnt: "",
      readMsgTotal: "",
      showNewDetailsFlag: false,
      newDetails: {},
      dictData: {
        type: [
          { name: "全部", key: "0" },
          { name: "排查任务", key: "1" },
          { name: "审核任务", key: "2" },
          { name: "处置任务", key: "3" },
        ],
        sort: [
          { name: "接收时间由近到远", key: "1" },
          { name: "接收时间由远到近", key: "2" },
          { name: "截止时间近到远", key: "3" },
          { name: "截止时间远到近", key: "4" },
        ],
        c0103: [
          { name: "待完成", key: "0" },
          { name: "已完成", key: "1" },
        ],
      },
      form: {
        type: "0",
        sort: "1",
        keyWords: "",
        c0103: "0",
      },
      newsKeyWords: "",
      newsFlag: true,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      const params = {}
      params.orderType = this.form.sort
      params.c0103 = this.form.c0103
      params.c0302 = this.form.keyWords
      this.queryTask(null, params);
      this.getNoReadMessageCnt();
      this.getWorkPlaceTotalData();
      this.queryMessage();
    });
  },
  filters: {
    taskStatus(val) {
      let obj = {
        1: "排查",
        2: "审核",
        3: "处置",
      };
      return obj[val];
    },
  },
  methods: {
    queryMessage(page, searchParams) {
      let param = {};
      param.pageSize = this.pagination1.pageSize;
      if (page) {
        param.pageNum = page;
        this.pagination1.current = page;
      } else {
        param.pageNum = this.pagination1.current;
      }
      if (searchParams) {
        if (!isEmptyStr(searchParams.title)) {
          param.title = searchParams.title;
        }
        if (!isEmptyStr(searchParams.status)) {
          param.status = searchParams.status;
        }
      }
      this.$http
        .post(getMessageList, param)
        .then((res) => {
          let messageList = res.result.list;
          if (messageList && messageList.length) {
            for (let index in messageList) {
              let messageObj = messageList[index];
              let status = "";
              if (messageObj.status == "read" || messageObj.status == "reply") {
                status = "2";
              } else {
                status = "1";
              }
              let des = messageObj.sendTime;
              messageObj.description = des;
              messageObj.status = status;
              messageList[index] = messageObj;
            }
            this.messageList = messageList;
            this.pagination1.total = res.result.total;
          }
        })
        .catch(() => {});
    },
    // 排查任务列表-分页
    showSizeChange({ currentPage, pageSize }) {
      this.pagination.pageSize = pageSize;
      this.pagination.current = currentPage;
      let params = {}
      params.orderType = this.form.sort
      params.c0103 = this.form.c0103
      params.c0302 = this.form.keyWords
      this.queryTask(null, params);
    },
    showSizeChange1({ currentPage, pageSize }) {
      this.pagination1.pageSize = pageSize;
      this.pagination1.current = currentPage;
      this.queryMessage();
    },
    lookTask(item) {
      this.taskVisible = true;
      this.taskDetails = item;
    },
    readMessage(item) {
      if (item.readTime) {
        this.showNewDetails(item);
      } else {
        let params = {};
        params.userMessageId = item.userMessageId;
        this.$http
          .post(api.readUserMessage, params)
          .then((res) => {
            this.showNewDetails(item);
            this.getNoReadMessageCnt();
            this.queryMessage();
          })
          .catch((error) => {
            this.showNewDetails(item);
          });
      }
    },
    showNewDetails(item) {
      this.newDetails = item;
      this.showNewDetailsFlag = true;
    },
    closeNewDetails() {
      this.showNewDetailsFlag = false;
      this.newDetails = {};
    },
    onSearchTask(value) {
      const params = {};
      params.c0302 = value;
      this.queryTask(null, params);
    },
    onSearchMsg(value) {
      const params = {};
      params.title = value;
      this.queryMessage(null, params);
    },
    toTask(value) {
      if (value.c0303 == "1") {
        this.$router.push({
          name: "URResourcesCheck",
          params: {
            c0301: value.c0301,
            c0302: value.c0302,
            c0303: value.c0303,
          },
        });
      } else if (value.c0303 == "2") {
        this.$router.push({
          name: "TreeResourcesCheck",
          params: {
            c0301: value.c0301,
            c0302: value.c0302,
            c0303: value.c0303,
          },
        });
      } else {
        this.$router.push({
          name: "RoadResourcesCheck",
          params: {
            c0301: value.c0301,
            c0302: value.c0302,
            c0303: value.c0303,
          },
        });
      }
    },
    //查询排查任务
    queryTask(page, obj) {
      const param = {};
      param.pageSize = this.pagination.pageSize;
      if (page) {
        param.pageNum = page;
        this.pagination.current = page;
      } else {
        param.pageNum = this.pagination.current;
      }
      if (obj) {
        if (!isEmptyStr(obj.c0302)) {
          param.c0302 = obj.c0302;
        }
        if (!isEmptyStr(obj.orderType)) {
          param.orderType = obj.orderType;
        }
        if (!isEmptyStr(obj.c0103)) {
          param.c0103 = obj.c0103;
        }
      }
      // param.c0103 = "0"; //未排查
      this.$http
        .post(getWorkPlaceListData, param)
        .then((res) => {
          if (res.result.list.length > 0) {
            //对所有排查添加类型属性
            let taskList = [];
            res.result.list.forEach((item, index) => {
              taskList.push(Object.assign({}, item, { status: "1" }));
            });
            this.taskList = taskList;
            this.pagination.total = res.result.total;
            // this.pagination.pages = res.result.pages;
          } else {
            this.taskList = [];
          }
        })
        .catch((error) => {
          console.log(JSON.stringify(error));
        });
    },
    taskTotalQuery(value) {
      const params = {};
      params.c0301 = value;
      return new Promise((resolve, reject) => {
        this.$http.post(getTaskDetails, params).then((res) => {
          resolve(res.result.total);
        });
      });
    },
    //选择业务类型
    handleTaskClick(key) {
      if (key === "0") {
        this.queryTask();
      } else if (key === "1") {
        this.queryTask(null, { c0103: "0" });
      } else if (key === "2") {
        this.taskList = [];
      } else if (key === "3") {
        this.taskList = [];
      }
    },
    //选择排序
    handleOrderClick(key) {
      let params = Object.assign({}, this.form);
      params.orderType = key;
      this.queryTask(null, params);
    },
    handleStatusClick(key) {
      const params = {};
      params.c0103 = key;
      this.queryTask(null, params);
    },
    getNoReadMessageCnt() {
      let param = {};
      this.$http
        .post(getNoReadCnt, param)
        .then((res) => {
          this.noReadMessageCnt = res.result;
        })
        .then(() => {
          this.$http.post(getMessageList, param).then((res1) => {
            this.readMsgTotal = res1.result.total - this.noReadMessageCnt;
          });
        })
        .catch(() => {});
    },
    setListDivHeight() {
      let total = this.pagination.total;
      let pageSize = this.pagination.pageSize;
      let pages = 0;
      if (total && pageSize) {
        pages = Math.ceil(total / pageSize);
      }
      if (pages <= 1) {
        //如果总页数小于等于1则不处理
        this.listDivHeight = "auto";
        return;
      }
      if (this.taskList.length != pageSize) {
        //不满的页数 不设置高度
        return;
      }
      let divheight = 0;
      try {
        divheight = this.$refs.listDiv.offsetHeight;
      } catch (e) {}
      if (divheight && this.listDivHeight == "auto") {
        this.listDivHeight = divheight + "px";
      } else if (divheight && this.listDivHeight < divheight) {
        this.listDivHeight = divheight + "px";
      }
    },
    getWorkPlaceTotalData() {
      let param = {};
      this.$http
        .post(getWorkPlaceTotalData, param)
        .then((res) => {
          this.allInfo = res.result;
        })
        .catch(() => {});
    },
    readAllMessage(){
      let params = {};
      this.$http.post(api.readAllUserMessage,params).then(res=>{
        this.getNoReadMessageCnt();
        this.queryMessage();
      }).catch(error=>{

      });
    },
  },
};
</script>

<style lang="less" scoped>
.work-place {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
  color: #fff;
  .left-wrap {
    flex: 2;
    height: 100%;
    //margin-right: 2.6vw;
    .count {
      display: flex;
      align-items: center;
      justify-content: space-between;
      li {
        flex: 0 0 auto;
        width: 32%;
        //height: 165px;
        //padding-top: 25px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background: url("@/assets/img/workplace/task-bg.png") no-repeat;
        background-size: 100% 100%;
        .item {
          flex: 0 0 auto;
          //height: 84px;
          display: flex;
          align-items: center;
          img {
            flex: 0 0 auto;
            width: 5vw;
            //height: 84px;
            vertical-align: middle;
          }
          .item-content {
            flex: 0 0 auto;
            margin-left: 1.3vw;
            .item-content-title {
              //font-size: 18px;
            }
            .item-content-count {
              font-size: 28px;
              font-weight: bold;
              color: #77eaff;
              span {
                padding-left: 4px;
                font-size: 18px;
                font-weight: normal;
                color: #fff;
              }
            }
          }
        }
        .progress {
          display: flex;
          margin-top: 10px;
        }
      }
    }
    .task {
      position: relative;
      height: calc(100% - 240px);
      .table-empty {
        position: absolute;
        width: 100%;
        top: 50%;
        margin-top: -65px;
      }
      .title {
        line-height: 26px;
        padding-left: 30px;
        padding-bottom: 6px;
        border-bottom: 1px dashed #364b7f;
        background: url("@/assets/img/workplace/task-icon.png") no-repeat left
          top;
        background-size: 26px 26px;
        font-size: 16px;
      }
      .condition {
        //display: flex;
        align-items: center;
        margin-top: 8px;
        .desc {
          //width: 130px;
          //flex: 1;
          display: flex;
          align-items: center;
          img {
            flex: 0 0 auto;
            width: 51px;
            height: 42px;
            vertical-align: middle;
          }
          label {
            flex: 0 0 auto;
            margin-left: 15px;
          }
          p {
            flex: 0 0 auto;
            margin-left: 15px;
            font-size: 18px;
            font-weight: bold;
            color: #d94a49;
          }
          span {
            margin-left: 2px;
            color: #d94a49;
          }
        }
        .con-search {
          //flex: 0 0 auto;
          //display: flex;
          //flex-wrap: wrap;
          //align-items: center;
          label {
            flex: 0 0 auto;
          }
        }
      }
      .task-list {
        margin-top: 20px;
        height: 285px;
        li {
          display: flex;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid #364b7f;
          font-size: 16px;
          .status-1 {
            flex: 0 0 auto;
            width: 60px;
            height: 32px;
            line-height: 32px;
            border-radius: 3px;
            background: #1db77d;
            text-align: center;
          }
          .status-2 {
            flex: 0 0 auto;
            width: 60px;
            height: 32px;
            line-height: 32px;
            border-radius: 3px;
            background: #d94a49;
            text-align: center;
          }
          .status-3 {
            flex: 0 0 auto;
            width: 60px;
            height: 32px;
            line-height: 32px;
            border-radius: 3px;
            background: #d4237a;
            text-align: center;
          }
          .text {
            flex: 1;
            margin-left: 10px;
            overflow: hidden; //隐藏
            white-space: nowrap; //不换行
            text-overflow: ellipsis; //超出部分省略号
          }
          .num {
            flex: 0 0 auto;
            width: 150px;
            margin-left: 10px;
            span {
              padding: 0 3px;
              color: #77eaff;
            }
          }
          .timer {
            flex: 0 0 auto;
            width: 180px;
            margin-left: 10px;
          }
        }
      }
    }
  }
  .right-wrap {
    flex: 1;
    height: 100%;
    //padding: 20px 1vw;
    border: 1px solid #0f4f9a;
    box-sizing: border-box;
    .title {
      display: flex;
      align-items: center;
      line-height: 26px;
      padding-left: 24px;
      padding-bottom: 15px;
      border-bottom: 1px solid #364b7f;
      background: url("@/assets/img/workplace/nesw-icon.png") no-repeat left top
        6px;
      background-size: 16px 16px;
      font-size: 16px;
      p {
        flex: 1;
      }
      span {
        flex: 0 0 auto;
        padding-left: 20px;
        color: #77eaff;
        cursor: pointer;
      }
    }
    .perusal {
      margin-top: 30px;
      display: flex;
      align-items: center;
      div {
        flex: 1;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 2.65vw;
          height: 40px;
          vertical-align: middle;
        }
        p {
          flex: 1;
          margin-left: 8px;
          font-size: 16px;
          span {
            padding: 0 3px;
            color: #77eaff;
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
    .message-list {
      margin: 30px 0 10px;
      height: 370px;
      li {
        display: flex;
        align-items: center;
        padding: 25px 10px;
        line-height: 24px;
        border-radius: 8px;
        cursor: pointer;
        .status-1 {
          flex: 0 0 auto;
          width: 8px;
          height: 8px;
          border-radius: 100%;
          background: #fa5655;
        }
        .status-2 {
          flex: 0 0 auto;
          width: 8px;
          height: 8px;
          border-radius: 100%;
          background: #636363;
        }
        div {
          flex: 1;
          margin-left: 6px;
          overflow: hidden; //隐藏
          white-space: nowrap; //不换行
          text-overflow: ellipsis; //超出部分省略号
        }
        p {
          flex: 0 0 auto;
          width: 140px;
        }
        &:nth-child(odd) {
          background: rgba(35, 49, 84, 1);
        }
      }
    }
  }

  .spread-news {
    flex: 0 0 auto;
    line-height: 26px;
    margin-top: 21px;
    padding:0 15px;
    font-size: 16px;
    color: #77eaff;
    cursor: pointer;
  }
  ::v-deep .vxe-pager {
    background-color: transparent;
    .vxe-pager--jump,
    .vxe-pager--total {
      color: #ffffff;
    }
  }
}
::v-deep .ant-select-selection {
  background: #002a44;
  color: rgba(255, 255, 255, 0.65);
  .ant-select-arrow {
    color: rgba(255, 255, 255, 0.65);
  }
}

@media screen and (max-width: 1500px) {
  .left-wrap {
    margin-right: 8px;
    .count {
      > li {
        height: 130px;
        padding-top: 15px;
        .item {
          img {
            height: 60px;
          }
          .item-content {
            .item-content-title {
              font-size: 16px;
            }
            .item-content-count {
              margin-top: 0;
              font-size: 16px;
            }
          }
        }
      }
    }
    .task {
      margin-top: 5px;
    }
  }
  .right-wrap {
    padding: 8px;
  }
}

@media screen and (min-width: 1500px) {
  .left-wrap {
    margin-right: 16px;
    .count {
      > li {
        height: 165px;
        padding-top: 25px;
        .item {
          img {
            height: 84px;
          }
          .item-content {
            .item-content-title {
              font-size: 18px;
            }
            .item-content-count {
              margin-top: 10px;
              font-size: 18px;
            }
          }
        }
      }
    }
    .task {
      margin-top: 15px;
    }
  }
  .right-wrap {
    padding: 20px;
  }
}

</style>
<style lang="less">
.ry-select {
  background-color: #002a44 !important;
  color: rgba(255, 255, 255, 0.65);
  .ant-select-dropdown-menu-item {
    color: rgba(255, 255, 255, 0.65);
  }
  .ant-select-dropdown-menu-item-selected {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    background-color: #20294b !important;
  }
  .ant-select-dropdown-menu-item {
    &:hover:not(ant-select-dropdown-menu-item-disabled) {
      background-color: #5bc2d9 !important;
    }
  }
}
</style>
